<template>
  <view class="component">
    <view class="tab-view">
      <view
        :class="['ui-button button-style--plain', active == d.value ? 'button-function--active' : '']"
        v-for="d in data"
        :key="d.value"
        @tap="handleChange(d)"
        >{{ d.name }}</view
      >
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const emit = defineEmits(["update:modelValue"]);

const active = ref(props.modelValue);

const handleChange = (d) => {
  active.value = d.value;
  console.log('handleChange', d);
  
  emit("update:modelValue", active.value);
}

</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.component {
  .tab {
    &-view {
      display: flex;
      gap: 24rpx;
    }
  }
}
</style>
